import React, { Component } from 'react';

import News from '../News/index'
import Index from '../Index/index'
import HouseList from '../HouseList/index'
import Profile from '../Profile/index'


import { Route } from 'react-router-dom'
import { TabBar } from 'antd-mobile';
import './index.scss'

// Tabbar 数据
const tabItems = [
    {
      title: '首页',
      icon: 'icon-ind',
      path: '/home'
    },{
      title: '找房',
      icon: 'icon-findHouse',
      path: '/home/list'
    },{
      title: '咨询',
      icon: 'icon-infom',
      path: '/home/news'
    },{
      title: '我的',
      icon: 'icon-my',
      path: '/home/profile'
    }
  ]
class Home extends Component {
  state = {
    selectedTab: this.props.location.pathname,
  };

  componentDidUpdate(prevProps) {
    if(prevProps.location.pathname !== this.props.location.pathname) {
      this.setState({
        selectedTab: this.props.location.pathname
      })
    }
  }
  // 渲染 TabBar 导航
  renderTabBarItem() {
    return tabItems.map(item => (
          <TabBar.Item
          icon={
            <i className={`iconfont ${item.icon}`}></i>
          }
          selectedIcon={
            <i className={`iconfont ${item.icon}`}></i>
          }
          title={ item.title }
          key={ item.title }
          selected={ this.state.selectedTab === item.path }
          onPress={() => {
            this.setState({
              selectedTab:  item.path ,
            });
            this.props.history.push( item.path )
          }}
        >
        </TabBar.Item>
      )
    )
  };
  render() {
    return (
      <div className="home">
        {/* 通过 Route 渲染子路由 */}
        <Route path="/home/news" component={ News }></Route>  
        <Route exact path="/home" component={ Index }></Route>  
        <Route path="/home/list" component={ HouseList }></Route>  
        <Route path="/home/Profile" component={ Profile }></Route>  

        {/* TarBar */}
        <TabBar tintColor="#21b97a" barTintColor="white" noRenderContent={ true }>
          { this.renderTabBarItem() }
        </TabBar>
      </div>
    );
  }
}

export default Home;